<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top">

				<el-tab-pane label="系统设置">
					<el-form ref="form" :model="sys" label-width="200px" style="margin-top: 40px">
						<el-form-item label="系统logo">
							<sc-upload v-model="sys.logo" :apiObj="uploadApi" :on-success="success" title="上传"
									   icon="el-icon-picture-outline"></sc-upload>
						</el-form-item>
						<el-form-item label="系统名称">
							<el-input v-model="sys.name"></el-input>
						</el-form-item>
						<el-form-item label="平台默认单个视频转发次数">
							<el-input v-model="sys.dcspzf"></el-input>
						</el-form-item>
						<el-form-item label="关于我们">
							<el-input v-model="sys.about_us"></el-input>
							<div class="el-form-item-msg" data-v-b33b3cf8="">挂载微信公众号链接</div>
						</el-form-item>
						<el-form-item label="常见问题">
							<el-input v-model="sys.common_problem"></el-input>
							<div class="el-form-item-msg" data-v-b33b3cf8="">挂载微信公众号链接</div>

						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="baocun(sys)">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="微信公众号配置">
					<el-form ref="form" :model="wx" label-width="100px" style="margin-top: 20px;">

						<el-form-item label="appid">
							<el-input v-model="wx.wxappid"></el-input>
						</el-form-item>
						<el-form-item label="secret">
							<el-input v-model="wx.wxsecret"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="baocun(wx)">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="抖音开放平台配置">
					<el-form ref="form" :model="dy" label-width="100px" style="margin-top: 20px;">
						<!--						<el-form-item label="短信开关">-->
						<!--							<el-switch v-model="msg.open"></el-switch>-->
						<!--							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后用户无法收到短信，但日志中将记录</div>-->
						<!--						</el-form-item>-->
						<el-form-item label="client_key">
							<el-input v-model="dy.dy_client_key"></el-input>
						</el-form-item>
						<el-form-item label="client_secret">
							<el-input v-model="dy.dy_client_secret"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="baocun(dy)">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="快手开放平台配置">
					<el-form ref="form" :model="ks" label-width="100px" style="margin-top: 20px;">
						<!--						<el-form-item label="短信开关">-->
						<!--							<el-switch v-model="msg.open"></el-switch>-->
						<!--							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后用户无法收到短信，但日志中将记录</div>-->
						<!--						</el-form-item>-->
						<el-form-item label="appid">
							<el-input v-model="ks.ks_appid"></el-input>
						</el-form-item>
						<el-form-item label="appsecret">
							<el-input v-model="ks.ks_appsecret"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="baocun(ks)">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="扩展配置">
					<el-alert title="扩展配置为系统业务所有的配置，应该由系统管理员操作，如需用户配置应另起业务配置页面。" type="warning"
							  style="margin-bottom: 15px;"></el-alert>

					<el-table :data="setting" stripe>
						<el-table-column label="ID" prop="id" width="50"></el-table-column>
						<el-table-column label="KEY" prop="key" width="150">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.key" placeholder="请输入内容"></el-input>
								<span v-else>{{ scope.row.key }}</span>
							</template>
						</el-table-column>
						<el-table-column label="VALUE" prop="value" width="350">
							<template #default="scope">
								<template v-if="scope.row.isSet">
									<el-switch v-if="typeof scope.row.value==='boolean'"
											   v-model="scope.row.value"></el-switch>
									<el-input v-else v-model="scope.row.value" placeholder="请输入内容"></el-input>
								</template>
								<span v-else>{{ scope.row.value }}</span>
							</template>
						</el-table-column>
						<el-table-column label="CATEGORY" prop="category" width="150">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.category"
										  placeholder="请输入内容"></el-input>
								<span v-else>{{ scope.row.category }}</span>
							</template>
						</el-table-column>
						<el-table-column label="TITLE" prop="title" width="350">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.title"
										  placeholder="请输入内容"></el-input>
								<span v-else>{{ scope.row.title }}</span>
							</template>
						</el-table-column>
						<el-table-column label="排序" prop="sort" width="350">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.sort"
										  placeholder="请输入内容"></el-input>
								<span v-else>{{ scope.row.sort }}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="1"></el-table-column>
						<el-table-column label="操作" fixed="right" width="100">
							<template #default="scope">
								<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">
									{{ scope.row.isSet ? '保存' : "修改" }}
								</el-button>
								<el-button v-if="scope.row.isSet" @click="scope.row.isSet=false" type="text"
										   size="small">取消
								</el-button>
								<el-popconfirm v-if="!scope.row.isSet" title="确定删除吗？" @confirm="table_del(scope.row)">
									<template #reference>
										<el-button type="text" size="small">删除</el-button>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-plus" @click="table_add"
							   style="margin-top: 20px;"></el-button>
				</el-tab-pane>

			</el-tabs>
		</el-card>
	</el-main>
</template>

<script>
export default {
	name: 'system',
	data() {
		return {
			sys: {},
			wx: {},
			dy: {},
			ks: {},
			msg: {
				open: true,
				appKey: "",
				secretKey: ""
			},
			setting: [],
			uploadApi: this.$API.upload.img,

		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		baocun(data) {
			console.log(data)
			this.$API.system.keyedit.post(data).then((res) => {

				this.$message.success(res.msg)

				this.getData()
			})
		},
		async getData() {
			var system = await this.$API.system.getdata.get();
			// console.log(system.data)
			this.sys = system.data.xt
			this.wx = system.data.wx
			this.dy = system.data.dy
			this.ks = system.data.ks
			this.setting = system.data.all
		},
		table_add() {
			var newRow = {
				key: "",
				value: "",
				title: "",
				sort: 0,
				isSet: true
			}
			this.setting.push(newRow)
		},
		success(res) {
			this.sys.logo = res.data
			return false
		},
		async table_edit(row) {

			if (row.isSet) {
				row.isSet = false
				console.log(row)
				delete row.isSet
				var data = await this.$API.system.edit.post(row)
				this.$message.success(data.msg)
				this.getData()
			} else {
				row.isSet = true
			}
		},
		async table_del(row) {
			// this.setting.splice(index, 1)
			var p = {id: row.id}
			var data = await this.$API.system.del.post(p)
			this.$message.success(data.msg)
			this.getData()

		},

	}
}
</script>

<style>
</style>
